<template>
	<view class="mine">
		
		<view class="mine-header">
			<image :src="portrait" class="portrait"></image>
			<view class="mine-txt" @top="Revise">
				<text class="mineName">{{mineName}}</text>
				<text class="mineAutograph">{{mineAutograph}}</text>
			</view>
		</view>
		
		<view class="mine-common">
			<view class="follow">
				{{follow}}
				<text>我的关注</text>
			</view>
			<view class="follow">
				{{fans}}
				<text>我的粉丝</text>
			</view>
			<button type="primary" size="mini" class="followBtn">+关注</button>
		</view>
		
		<view class="mine-list">
			<navigator v-for="(item, index) in mineList" :key="index" class="mine-type">
				<view class="mine-number">{{item.number}}</view>
				<view class="mine-title">{{item.title}}</view>
			</navigator>
		</view>
		
		<!-- 游记 -->
		<!--<fallList></fallList>-->
		 <view class="fallList">
			<navigator class="fallBlock" v-for="(item , index) in fallList" :key="index" :url="`/pages/common/${item.fallUrl}`">
				<image :src="item.fallImg" :mode="item.mode" class="fallImg">
				<view class="fallTitle">{{item.fallTitle}}</view>
				<view class="fallFooter">
					 <view class="fallPortrait">
						<image :src="item.fallPortrait" :mode="item.mode">
						<text>{{item.fallName}}</text>
					 </view>
					 <view class="iconfont iconlike" :class="item.like"><text>{{item.likeViews}}</text></view>
					 <view class="iconfont iconSee" :class="item.see"><text>{{item.seeViews}}</text></view>
					 <view class="iconfont iconComment" :class="item.comment"><text>{{item.commentViews}}</text></view>
				</view>
			</navigator>
		</view> 
		
	</view>
</template>

<script>
//import fallList from '../../components/fallList/index.vue'
export default {
	/* components:{
		fallList
	}, */
	data() {
		 return {
			 portrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
			 mineName:'爱生活的小美女',
			 mineAutograph:'写下你想对世界说的话，就现在',
			 follow:'25',
			 fans:'11.2w',
			 mineList:[
				 {title:'游记', number:'3'},
				 {title:'获赞', number:'30'},
				 {title:'评论', number:'8'},
				 {title:'收藏', number:'12'}
			 ],
			 fallList:[
				 {
				 	fallUrl:'index',
				 	fallImg:'https://n1-q.mafengwo.net/s15/M00/50/DE/CoUBGV3qcaeAUJBKAAP8Z5F_70c757.jpg',
				 	mode:'aspectFill',
				 	fallTitle:'1去青海甘肃游玩，行前准备工作指南！（超实用附路线）',
				 	fallPortrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
				 	fallName:'爱生活的小美女',
				 	see:'icon-pc-yulan',
				 	seeViews:'85',
				 	comment:'icon-pinglun',
				 	commentViews:'10',
					like:'icon-zan',
					likeViews:'602'
				  },
				  {
				 	fallUrl:'index',
				 	fallImg:'https://p1-q.mafengwo.net/s15/M00/57/A9/CoUBGV3rBNSAQFusAAXNX6_foZM495.jpg',
				 	mode:'aspectFill',
				 	fallTitle:'·乱花渐欲迷人眼，美！（自驾青甘7日大环线）',
				 	fallPortrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
				 	fallName:'爱生活的小美女',
				 	see:'icon-pc-yulan',
				 	seeViews:'1535',
				 	comment:'icon-pinglun',
				 	commentViews:'144',
					like:'icon-zan1',
					likeViews:'310'
				  },
				  {
				 	fallUrl:'index',
				 	fallImg:'https://p1-q.mafengwo.net/s15/M00/57/BA/CoUBGV3rBN6AcGIZAAWt-uxhAIs363.jpg',
				 	mode:'aspectFill',
				 	fallTitle:'最好的风景在路上——青海湖小环线',
				 	fallPortrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
				 	fallName:'爱生活的小美女',
				 	see:'icon-pc-yulan',
				 	seeViews:'125',
				 	comment:'icon-pinglun',
				 	commentViews:'1',
					like:'icon-zan1',
					likeViews:'290'
				  },
				  {
				 	fallUrl:'index',
				 	fallImg:'http://p1-q.mafengwo.net/s8/M00/D0/2B/wKgBpVVu2p6AZgb1AAXrS2dzjXM26.jpeg',
				 	mode:'aspectFill',
				 	fallTitle:'一路向西——青海湖、可可西里、敦煌、嘉峪关、张掖大环线行',
				 	fallPortrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
				 	fallName:'爱生活的小美女',
				 	see:'icon-pc-yulan',
				 	seeViews:'125',
				 	comment:'icon-pinglun',
				 	commentViews:'1',
					like:'icon-zan1',
					likeViews:'263'
				  },
				  {
				 	fallUrl:'index',
				 	fallImg:'http://b1-q.mafengwo.net/s15/M00/10/92/CoUBGV3OrN-ATJRlABD7zT1RGsk450.jpg',
				 	mode:'aspectFill',
				 	fallTitle:'一路向西——青海湖、可可西里、敦煌、嘉峪关、张掖大环线行',
				 	fallPortrait:'https://b1-q.mafengwo.net/s15/M00/32/4D/CoUBGV3qZgGAWN3mAAc8NR-YDhU219.jpg',
				 	fallName:'爱生活的小美女',
				 	see:'icon-pc-yulan',
				 	seeViews:'125',
				 	comment:'icon-pinglun',
				 	commentViews:'1',
					like:'icon-zan1',
					likeViews:'189'
				  }
			 ]
		}
	},
	methods: {
		 onReady: function() {
			 uni.setNavigationBarTitle({
			 	title: '爱生活的小美女主页'
			 }),
			 //success:res =>{},
			 // fail:() =>{},
			//complete:() => {}
		    console.log("页面首次渲染完毕时执行");
		  },
	}
}
</script>

<style  lang="scss">
@import "../../icon/iconfont.css";
.mine{
	width: 100%;
	background: -webkit-gradient(linear, bottom right, from(#19c1e6), to(#31a6f2), to(#4095f9));  
	background: -o-linear-gradient(left right, #19c1e6, #31a6f2, #4095f9);  
	background: linear-gradient(to right bottom,#19c1e6 20%,#31a6f2, #4095f9);
	.mine-header{
		width: 100%;
		position: relative;
		padding: 150rpx 0 60rpx;
		.portrait{
			border-radius: 100%;
			width: 108rpx;
			height: 108rpx;
			border: 5rpx solid #FFFFFF;
			position: absolute;
			left: 30rpx;
		}
		.mine-txt{
			margin-left: 170rpx;
			padding-top: 6rpx;
			letter-spacing: $uni-spacing-row-dm;
			position: relative;
			::after{
				content: '';
				position: absolute;
				top: 50rpx;
				right: 40rpx;
				width: 14rpx;
				height: 14rpx;
				border-top: 2rpx solid #FFFFFF;
				border-right: 2rpx solid #FFFFFF;
				transform: rotate(45deg);
				
			}
			.mineName{
				font-size: $uni-font-size-rty;
				display: block;
				line-height: 60rpx;
				color: $uni-text-color-inverse;
			}
			.mineAutograph{
				font-size: $uni-font-size-xm;
				display: block;
				color: $uni-text-color-white;
			}
		}
	}
	.mine-common{
		margin-left: 30rpx;
		position: relative;
		.follow{
			display: inline-block;
			color: $uni-text-color-inverse;
			font-size: $uni-font-size-base;
			padding: 0 80rpx 30rpx 0;
			text-align: center;
			letter-spacing: $uni-spacing-row-xm;
			text{
				font-size: $uni-font-size-xm;
				color: $uni-text-color-white;
				display: block;
				letter-spacing: $uni-spacing-row-dm;
			}
		}
		.followBtn{
			position: absolute;
			right: 38rpx;
			background-color: $uni-bg-color-orange;
		}
	}
	.mine-list{
		background-color: $uni-bg-color;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		.mine-type{
			display: inline-block;
			width: 25%;
			text-align: center;
			letter-spacing: $uni-spacing-row-xm;
			padding: 30rpx 0;
			border-bottom: 2rpx solid $uni-bg-color-grey;
			.mine-number{
				color: $uni-text-color;
				font-size: $uni-font-size-lg;
			}
			.mine-title{
				padding-top: $uni-spacing-row-dm;
				color: $uni-text-color-placeholder;
				font-size: $uni-font-size-six;
			}
		}
	}
	.fallList{
		width: 96%;
		padding:2% 2% 0;
	}
}
	
</style>
